<script setup>
	import { useUserStore } from '@/store/userInfo'
	import { onMounted } from 'vue'

	// 获取用户状态管理
	const userStore = useUserStore( )

	/**
	 * 检查管理员权限
	 * @returns {boolean} 是否有管理员权限
	 * @description 检查当前用户是否登录且是否具有管理员角色
	 */
	const checkAdmin = ( ) => {
		if ( !userStore.userInfo.uid || userStore.userInfo.role?.[ 0 ] !== 'admin' ) {
			uni.showToast( {
				title: '无权限访问',
				icon: 'none'
			} )
			setTimeout( ( ) => {
				uni.navigateBack( )
			}, 1500 )
			return false
		}
		return true
	}

	/**
	 * 处理菜单点击
	 * @param {string} type - 菜单类型
	 * @description 根据不同的菜单类型跳转到对应的页面
	 */
	const handleMenu = ( type ) => {
		if ( !checkAdmin( ) ) return

		switch ( type ) {
			case 'shopInfo': // 店铺信息
				uni.navigateTo( {
					url: './shop/shopInfo'
				} )
				break
			case 'contartCode': // 企业客服
				uni.navigateTo( {
					url: './shop/contartCode'
				} )
				break
			case 'shopSettings': // 店铺设置
				uni.navigateTo( {
					url: './shop/shopSettings'
				} )
				break
			case 'productList': // 商品列表
				uni.navigateTo( {
					url: './productList/productList'
				} )
				break
			case 'hd_productList': // 活动列表
				uni.navigateTo( {
					url: './activityPro/activityPro'
				} )
				break
			case 'hd_banner': // 设置活动轮播图
				uni.navigateTo( {
					url: './hd_banner/hd_banner'
				} )
				break
			case 'categories': // 分类管理
				uni.navigateTo( {
					url: './cateManage/cateManage'
				} )
				break
			case 'orderList': // 订单列表
				uni.navigateTo( {
					url: './orderList/orderList'
				} )
				break
			case 'orderStats': // 订单统计
				uni.navigateTo( {
					url: './orderList/orderCount'
				} )
				break
			case 'merchantList': // 商户列表
				uni.navigateTo( {
					url: './merchantList/merchantList'
				} )
				break
		}
	}

	// 页面加载时检查权限
	onMounted( ( ) => {
		checkAdmin( )
	} )
</script>

<template>
	<view class="management-admin">
		<!-- 菜单列表容器 -->
		<view class="menu-list">
			<!-- 分类管理模块 -->
			<view class="menu-section">
				<view class="section-title">
					<view class="float"></view>
					<text>分类管理</text>
				</view>
				<view class="menu-item" @tap="handleMenu('categories')">
					<text class="name">管理分类</text>
				</view>
			</view>

			<!-- 商品管理模块 -->
			<view class="menu-section">
				<view class="section-title">
					<view class="float"></view>
					<text>商品管理</text>
				</view>
				<view class="menu-item" @tap="handleMenu('productList')">
					<text class="name">商品列表</text>
				</view>
				<view class="menu-item" @tap="handleMenu('hd_productList')">
					<text class="name">活动列表</text>
				</view>
				<view class="menu-item" @tap="handleMenu('hd_banner')">
					<text class="name">活动轮播</text>
				</view>
			</view>

			<!-- 店铺管理模块 -->
			<view class="menu-section">
				<view class="section-title">
					<view class="float"></view>
					<text>店铺管理</text>
				</view>
				<view class="menu-item" @tap="handleMenu('shopInfo')">
					<text class="name">店铺信息</text>
				</view>
				<view class="menu-item" @tap="handleMenu('contartCode')">
					<text class="name">企业客服</text>
				</view>
				<view class="menu-item" @tap="handleMenu('shopSettings')">
					<text class="name">店铺设置</text>
				</view>
			</view>

			<!-- 订单管理模块 -->
			<view class="menu-section">
				<view class="section-title">
					<view class="float"></view>
					<text>订单管理</text>
				</view>
				<view class="menu-item" @tap="handleMenu('orderList')">
					<text class="name">订单列表</text>
				</view>
				<view class="menu-item" @tap="handleMenu('orderStats')">
					<text class="name">订单统计</text>
				</view>
			</view>

			<!-- 商户管理模块 -->
			<view class="menu-section">
				<view class="section-title">
					<view class="float"></view>
					<text>商户管理</text>
				</view>
				<view class="menu-item" @tap="handleMenu('merchantList')">
					<text class="name">商户列表</text>
				</view>
			</view>
		</view>

		<!-- 底部安全区域占位 -->
		<view class="safe-area"></view>
	</view>
</template>

<style lang="scss" scoped>
	/* 后台管理页面容器 */
	.management-admin {
		min-height: 100vh; // 最小高度为视口高度
		padding: 24rpx; // 页面内边距
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		/* 兼容 iOS < 11.2 */
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		/* 兼容 iOS >= 11.2 */
		background-color: $page-bg-color; // 使用全局背景色变量

		/* 菜单列表样式 */
		.menu-list {

			/* 菜单分区样式 */
			.menu-section {
				margin-bottom: 24rpx; // 分区间距
				padding: 24rpx; // 分区内边距
				background-color: #fff; // 白色背景
				border-radius: 16rpx; // 圆角边框

				/* 分区标题样式 */
				.section-title {
					display: flex; // 弹性布局
					align-items: center; // 垂直居中对齐
					margin-bottom: 24rpx; // 标题下方间距
					font-size: 32rpx; // 标题字号
					color: $text-font-color-1; // 使用全局文本颜色变量
					font-weight: 600; // 字体加粗

					/* 标题前的浮标样式 */
					.float {
						width: 8rpx; // 浮标宽度
						height: 32rpx; // 浮标高度
						background-color: $brand-theme-color; // 使用主题色
						border-radius: 4rpx; // 浮标圆角
						margin-right: 16rpx; // 右侧间距
					}
				}

				/* 菜单项样式 */
				.menu-item {
					padding: 24rpx; // 内边距
					background-color: $page-bg-color; // 使用全局背景色
					border-radius: 12rpx; // 圆角
					margin-bottom: 16rpx; // 项目间距

					/* 最后一个菜单项移除底部间距 */
					&:last-child {
						margin-bottom: 0;
					}

					/* 点击效果 */
					&:active {
						opacity: 0.8; // 点击时透明度变化
					}

					/* 菜单项文本样式 */
					.name {
						font-size: 28rpx; // 文本字号
						color: $text-font-color-2; // 使用全局文本颜色变量
					}
				}
			}
		}

		/* 底部安全区域占位 */
		.safe-area {
			height: calc(24rpx + constant(safe-area-inset-bottom));
			/* 兼容 iOS < 11.2 */
			height: calc(24rpx + env(safe-area-inset-bottom));
			/* 兼容 iOS >= 11.2 */
			width: 100%;
		}
	}
</style>